import React, { PureComponent, Fragment } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import {
  Button,
  Tag,
  Modal,
  Form,
  message,
  Table,
  Radio,
  Input,
  Icon,
  Drawer,
  Row,
  Col,
  Switch,
  Progress, Tree, Select, Tooltip,
} from 'antd';
import MyPagination from '@/components/MyPagination';
import Loading from '@/components/Loading';

import find from 'lodash/find';
import debounce from 'lodash/debounce';
import {ellipsis, afterCloseModal, DescriptionItem, download, formateObjToParamStr} from '@/utils/utils';
import { routerRedux } from 'dva/router';
import BuildModalTitle from '@/components/BuildModalTitle';
import ReactDataGrid from 'react-data-grid';
import mail from './../../images/mail.png';
import mailOpen from './../../images/mail-open.png';
import AddOrEditUser from './addOrEditUser';
import ResignUser from './ResignUser';
import ChangeStatus from './ChangeStatus';
import Adjustment from './Adjustment';
import Detail from './Detail';
import Departments from './Departments'
import user from './../../images/user.png';
import SplitPane from 'react-split-pane'
import department from '../../images/department.png';
import request from "@/utils/request";
import config from "@/config/config";
const { TreeNode, DirectoryTree } = Tree;
const FormItem = Form.Item;
const { confirm } = Modal;
const { Option } = Select;

const RadioButton = Radio.Button;

const RadioGroup = Radio.Group;

@connect(({ inner_address_book, loading, global }) => ({
  inner_address_book,
  global,
  loading: loading.models.inner_address_book,
}))
@Form.create()
class BasicList extends PureComponent {
  constructor(props) {
    super(props);
    this.permissions = JSON.parse(sessionStorage.getItem('permissions'));
    this.state = {
      showAddBtn: find(this.permissions, { name: 'staff_operation' }),
      showdelBtn: find(this.permissions, { name: 'device_delete' }),
      showPasswordBtn: find(this.permissions, { name: 'user_default_password_edit' }),
      user_password_reset: find(this.permissions, { name: 'user_password_reset' }),
      visible: false,
      done: false,
      page: 1,
      per_page: 30,
      username: '',
      editRecord: {},
      selectedRowKeys: [],
      staff_team_situations:{
        staff_type:[],
        ethnicity:[],
        sex:[],
        education:[],
        age:[],
        hometown_type:[],
        political_status:[],
      }
    };
  }


  componentDidMount() {
    this.fetchSituations()
    const { dispatch } = this.props;
    const {
      inner_address_book: { pageLoaded, scrollData },
    } = this.props;
    console.log('pageLoaded', pageLoaded);
    dispatch({
      type: 'inner_address_book/fetchOrganization',
    })
    const table = document.querySelector('.react-grid-Canvas');
    if (pageLoaded) {
      setTimeout(() => {
        table.scrollTop = scrollData.y;
        table.scrollLeft = scrollData.x;
      }, 0);

    } else {
      const {
        inner_address_book: { searchParams },
      } = this.props;
      console.log('searchParams', searchParams);

      dispatch({
        type: 'inner_address_book/fetch',
        payload: searchParams,
        callback: () => {
          const { dispatch } = this.props;
          dispatch({
            type: 'inner_address_book/changeLoaded',
          });
          dispatch({
            type: 'inner_address_book/changeTableY',
          });
        },
      });

    }
    window.addEventListener('resize', this.resize);
    table.addEventListener('scroll', debounce(this.scroll, 150));

  }
  fetchSituations=()=>{
    const that=this;
    request(`/staff_team_situations`, {
      method: 'GET',
    }).then((response)=> {
      console.log("人员构成",response)
      if(response.status===200){
        that.setState({
          staff_team_situations:response.data.data
        })
      }
    })
  }
  scroll = (e) => {
    console.log('scroll');
    const { dispatch } = this.props;
    dispatch({
      type: 'inner_address_book/changeScroll',
      payload: {
        x: e.target.scrollLeft,
        y: e.target.scrollTop,
      },
    });
  };

  resize = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'inner_address_book/changeTableY',
    });
  };
  findChildFunc = (cb) => {
    this.file = cb;
  };

  componentWillUnmount() {
    console.log('componentWillUnmount');
    window.removeEventListener('resize', this.resize);
    const table = document.querySelector('.react-grid-Canvas');
    table.removeEventListener('scroll', debounce(this.scroll, 300));
  }

  handleSearch = (values, cb) => {
    console.log('handleSearch', values);
    const that = this;
    const { dispatch } = this.props;
    dispatch({
      type: 'inner_address_book/fetch',
      payload: {
        ...values,
      },
      callback() {
        console.log('handleSearch callback');
        if (cb) cb();
      },
    });
  };

  renderSimpleForm() {
    const {
      form: { getFieldDecorator },
      inner_address_book: { searchParams },
    } = this.props;
    return (
      <Form layout="inline" className="search-form">

        <FormItem>
          {
            find(this.permissions, { name: 'personnel_operation' }) &&
            <Button
              icon="plus"
              type="primary"
              onClick={
                () => {
                  this.setState({
                    addModal: true,
                  });
                }
              }
            >
              员工入职
            </Button>
          }
          {
            find(this.permissions, { name: 'staff_export' }) &&
            <Button
              className={'btn-green'}
              type="primary"
              icon="export"
              style={{ margin:'0 10px' }}
              onClick={this.handleExportInfo}
            >导出人事信息
            </Button>
          }
        </FormItem>

      </Form>
    );
  }

  handleAdd = () => {
    const formValues = this.AddForm.props.form.getFieldsValue();
    console.log( this.AddForm)
    console.log('formValues', formValues);
    const that = this;
    const state = this.AddForm.state;
    const user_id=state.selectUser.id?state.selectUser.id:""
    console.log(state)
    this.props.dispatch({
      type: 'inner_address_book/add',
      payload: {
        ...formValues,
        status:1,
        entry_date:formValues.entry_date?moment(formValues.entry_date).format('YYYY-MM-DD'):'',
        birthday:formValues.birthday?moment(formValues.birthday).format('YYYY-MM-DD'):'',
        user_id:user_id
      },
      callback() {
        message.success('添加员工成功');
        that.setState({
          addModal: false,
        });
        const {
          inner_address_book: { searchParams },
        } = that.props;
        that.handleSearch(searchParams);
      },
    });
  };

  handleFormReset = () => {
    const { form } = this.props;
    form.resetFields();
    this.handleSearch({
      structure_id: '',
      page: 1,
      per_page: 30,
    });
  };

  handleEdit = () => {
    const formValues = this.EditForm.props.form.getFieldsValue();
    console.log('formValues', formValues);
    const that = this;
    const state = this.EditForm.state;
    const user_id=state.selectUser.id?state.selectUser.id:""
    console.log(state)
    this.props.dispatch({
      type: `inner_address_book/edit`,
      payload: {
        ...formValues,
        entry_date:formValues.entry_date?moment(formValues.entry_date).format('YYYY-MM-DD'):'',
        birthday:formValues.birthday?moment(formValues.birthday).format('YYYY-MM-DD'):'',
        start_work_time:formValues.start_work_time?moment(formValues.start_work_time).format('YYYY-MM-DD'):'',
        join_party_time:formValues.join_party_time?moment(formValues.join_party_time).format('YYYY-MM-DD'):'',
        current_work_time:formValues.current_work_time?moment(formValues.current_work_time).format('YYYY-MM-DD'):'',
        education_start_time:formValues.education_start_time?moment(formValues.education_start_time).format('YYYY-MM-DD'):'',
        education_end_time:formValues.education_end_time?moment(formValues.education_end_time).format('YYYY-MM-DD'):'',
        sign_contract_time:formValues.sign_contract_time?moment(formValues.sign_contract_time).format('YYYY-MM-DD'):'',
        id: this.state.editRecord.id,
        user_id:user_id
      },
      callback() {
        message.success('修改员工成功');
        that.setState({
          editModal: false,
        });
        const {
          inner_address_book: { searchParams },
        } = that.props;
        that.handleSearch(searchParams);
      },
    });
  };
  handleAdjust = () => {
    const formValues = this.AdjustmentForm.props.form.getFieldsValue();
    console.log('formValues', formValues);
    const that = this;
    this.props.dispatch({
      type: `inner_address_book/edit`,
      payload: {
        ...this.state.editRecord,
        ...formValues,
        id: this.state.editRecord.id,
      },
      callback() {
        message.success('职位调整成功');
        that.setState({
          adjustmentModal: false,
        });
        const {
          inner_address_book: { searchParams },
        } = that.props;
        that.handleSearch(searchParams);
      },
    });
  };
  handleChangeStatus= () => {
    const formValues = this.ChangeStatusForm.props.form.getFieldsValue();
    console.log('formValues', formValues);
    const that = this;
    this.props.dispatch({
      type: `inner_address_book/changeStatus`,
      payload: {
        ...this.state.editRecord,
        ...formValues,
        regularization_date:formValues.regularization_date?moment(formValues.regularization_date).format('YYYY-MM-DD'):this.state.editRecord.regularization_date,
        resignation_date:formValues.resignation_date?moment(formValues.resignation_date).format('YYYY-MM-DD'):this.state.editRecord.resignation_date,
        status:this.state.editRecord.status===1?2:3,
        id: this.state.editRecord.id,
      },
      callback() {
        message.success(`${that.state.editRecord.status===1?'入职成功':'离职成功'}`);
        that.setState({
          changeStatusModal: false,
        });
        const {
          inner_address_book: { searchParams },
        } = that.props;
        that.handleSearch(searchParams);
      },
    });
  };
  handleDelete = id => {
    const that = this;
    const { dispatch } = this.props;
    dispatch({
      type: `inner_address_book/remove`,
      payload: { id },
      callback: () => {
        message.success('删除员工成功');
        const {
          inner_address_book: { searchParams },
        } = that.props;
        that.handleSearch(searchParams);
      },
    });
  };
  renderTreeNodes = data =>
    data.map(item => {

      if (item.children.length>0) {
        return (
          <TreeNode title={item.name} key={item.id} dataRef={item}>
            {this.renderTreeNodes(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode  key={item.id}  title={item.name}  {...item} isLeaf={item.children.length===0}/>;
    });
  refleshDepartments=()=>{
    const { dispatch } = this.props;
    dispatch({
      type: 'inner_address_book/fetchOrganization',
    })
  }
  handleExportInfo=()=>{
    const {
      inner_address_book: { searchParams },
    } = this.props;
    console.log('searchParams',searchParams)
    download(`${config.prefix}/staff_files?Authorization=Bearer ${sessionStorage.getItem('token')}&order_direction=desc&${formateObjToParamStr({...searchParams,type:5,company_id:sessionStorage.getItem('company_id')})}`)

  }
  render() {
    const that = this;
    const {
      inner_address_book: { data,expandedKeys, organizationData,loading, tableY, meta, searchParams, selectedRowKeys },
      global: { gridTableW },
    } = this.props;

    const defaultColumnProperties = {
      resizable: true,
    };
    const columns = [
      {
        name: '序号',
        width: 50,
        key: '_index',
        frozen: true,
        formatter: (event) => {
          const {
            inner_address_book: { meta },
          } = this.props;
          return <p className={'index'}>{((meta.current_page - 1) * meta.per_page) + (event.value + 1)}</p>;
        },
      },
      {
        name: '姓名',
        width: 150,
        key: 'name',
        frozen: true,
        formatter:(event)=>{
          return <span  style={{color:'blue',textDecoration:'underline',cursor:'pointer'}} onClick={(e) => {
            this.setState({
              editRecord: event.row,
              detailModal: true,
            });
          }}>
            <img src={user} style={{width:'20px',height:'20px',marginRight:'5px'
              ,position:'relative',top:'-3px'}} alt="" />{event.value}
          </span>
        }
      },
      {
        name: '状态',
        width: 80,
        frozen: true,
        key: 'status',
        formatter: (event) => {
          switch (event.value) {
            case 1:
              return <p className={`table-warm table-status`}>试用期</p>;
            case 2:
              return <p className={`table-success table-status`}>在职</p>;
            case 3:
              return <p className={`table-error table-status`}>离职</p>;
          }

        }
      },
      {
        name: '部门',
        width: 140,
        key: 'department_name',
        formatter: (event) => {
          if(event.value){
            return <span>
            <img src={department} style={{width:'20px',height:'20px',marginRight:'5px'
              ,position:'relative',top:'-3px'}} alt=""/>{event.value}
          </span>
          }else{
            return ''
          }

        }
      },
      {
        name: '职位',
        width: 130,
        key: 'position',
      },
      {
        name: '手机号码',
        width: 110,
        key: 'mobile',
      },
      {
        name: '性别',
        width: 60,
        key: 'sex',
      },
      {
        name: '族别',
        width: 60,
        key: 'ethnicity',
      },
      {
        name: '身份证号',
        width: 150,
        key: 'identity_number',
      },
      {
        name: '年龄',
        width: 60,
        key: 'age',
      },
      {
        name: '生日',
        width: 90,
        key: 'birthday',
      },
      {
        name: '政治面貌',
        width: 80,
        key: 'political_status',
      },
      {
        name: '参加工作时间',
        width: 110,
        key: 'start_work_time',
      },
      {
        name: '入职日期',
        width: 120,
        key: 'entry_date',
      },
      {
        name: '入党时间',
        width: 120,
        key: 'join_party_time',
      },
      {
        name: '学历',
        width: 80,
        key: 'education',
      },
      {
        name: '学历起始时间',
        width: 120,
        key: 'education_start_time',
      }, {
        name: '学历结束时间',
        width: 120,
        key: 'education_end_time',
      }, {
        name: '毕业院校',
        width: 110,
        key: 'graduated_school',
      }, {
        name: '专业',
        width: 110,
        key: 'major',
      }, {
        name: '籍贯',
        width: 80,
        key: 'hometown',
      }, {
        name: '出身地',
        width: 80,
        key: 'birth_place',
      }, {
        name: '户籍类型',
        width: 80,
        key: 'hometown_type',
      }, {
        name: '现住址',
        width: 110,
        key: 'current_address',
      }, {
        name: '签订劳动合同时间',
        width: 130,
        key: 'sign_contract_time',
      }, {
        name: '员工类型',
        width: 110,
        key: 'staff_type',
      },
      {
        name: '操作',
        width: 330,
        key: 'right',
        classname: 'operate',
        formatter: (event) => <Fragment>
          <Button
            className={'btn-cyan'}
            type="primary"
            size="small"
            icon="eye"
            onClick={(e) => {
              this.setState({
                editRecord: event.row,
                detailModal: true,
              });
            }
            }
          >详情
          </Button>
          {
            find(this.permissions, { name: "personnel_operation" }) && event.row.status!==3&&
            <Fragment>
              <Button
                type="primary"
                size="small"
                icon="rocket"
                onClick={(e) => {
                  this.setState({
                    editRecord: event.row,
                    adjustmentModal: true,
                  });
                }
                }
              >职位调整
              </Button>
            </Fragment>
          }
          {
            find(this.permissions, { name: 'personnel_operation' }) && event.row.status===1&& event.row.status!==3&&
            <Fragment>
              <Button
                type="primary"
                size="small"
                icon="edit"
                className={'btn-green'}
                onClick={(e) => {
                  this.setState({
                    editRecord: event.row,
                    changeStatusModal: true,
                  });
                }
                }
              >转正
              </Button>
            </Fragment>
          }
          {
            find(this.permissions, { name: 'personnel_operation' }) && event.row.status===2&& event.row.status!==3&&
            <Fragment>
              <Button
                type="danger"
                size="small"
                icon="logout"
                onClick={(e) => {
                  this.setState({
                    editRecord: event.row,
                    changeStatusModal: true,
                  });
                }}
              >离职
              </Button>
            </Fragment>
          }
          {
            find(this.permissions, { name: 'personnel_operation' }) && event.row.status!==3&&
            <Fragment>
              <Button
                type="primary"
                size="small"
                icon="edit"
                onClick={(e) => {
                  this.setState({
                    editRecord: event.row,
                    editModal: true,
                  });
                }
                }
              >编辑
              </Button>
            </Fragment>
          }
          {
            find(this.permissions, { name: 'personnel_operation' }) &&
            <Fragment>
              <Button
                type="danger"
                size="small"
                icon="delete"
                onClick={(e) => {
                  confirm({
                    title: `确定要删除"${event.row.name}"吗?`,
                    content: '请谨慎操作！',
                    okText: '确定',
                    okType: 'danger',
                    cancelText: '取消',
                    centered: true,
                    maskClosable: true,
                    onOk() {
                      that.handleDelete(event.row.id);
                    },
                    onCancel() {
                      console.log('Cancel');
                    },
                  });
                }
                }
              >删除
              </Button>
            </Fragment>
          }

        </Fragment>,
      },

    ].map(c => ({ ...defaultColumnProperties, ...c }));

    let totalWidth = 0;
    for (let i = 0; i < columns.length; i++) {
      totalWidth += columns[i].width;
    }
    console.log('gridTableW',gridTableW)
    if (totalWidth < (gridTableW-190)) {
      console.log('小于')
      columns[columns.length - 1].width = columns[columns.length - 1].width + (gridTableW-190) - totalWidth;
    }else{
      columns[columns.length - 1].width = 630;
    }
    return <div className="custom-card">
      <div className="table-title"><span className={'title-item'}>人事管理</span>
      </div>
      <div className="table-page" style={{position:'relative'}} >
        <SplitPane split="vertical" minSize={200} defaultSize={200} pane2Style={{paddingRight:'10px'}}>
          <div className={'table-page-left'} style={{maxHeight:'97%',height:'97%',position:'relative'}}>
            <div style={{width:'100%'}}>
              <Button className={'btn-gold'} onClick={()=>{
                this.setState({
                  departmentsModal:true,
                })
              }} type={'primary'} block>部门管理</Button>
            </div>
            {
              organizationData.length>0&&
              <DirectoryTree expandAction={false}  defaultExpandAll onSelect={(keys, event)=>{
                console.log('keys',keys)
                this.handleSearch({
                  ...searchParams,
                  department_id:keys[0],
                })
              }}
              >
                <TreeNode icon={<Icon type="team" />} title="全部员工" key=" " isLeaf />
                {this.renderTreeNodes(organizationData)}
              </DirectoryTree>
            }
          </div>
          <div style={{position:'relative'}}>
            <div className="table-condition">{this.renderSimpleForm()}</div>

            <div style={{display:'flex',fontSize: "16px",color:'#111',background:'#eee',padding:'15px 20px'}}>
              <div style={{display:'flex', flexDirection:'column',justifyContent:"center",marginRight:'20px'}}>
                <div>员工数 : <span style={{color:'red',fontWeight:'bold'}}>{this.state.staff_team_situations.total_count}</span> 人</div>
              </div>
              <div style={{display:'flex', flexDirection:'column',justifyContent:"center",marginRight:'20px'}}>
                <div>女员工 : <span style={{color:'red',fontWeight:'bold'}} >{this.state.staff_team_situations.sex.length>0&&find(this.state.staff_team_situations.sex,(o)=>o.name==='女').count}</span> 人,
                  占比 : {this.state.staff_team_situations.sex.length>0&&find(this.state.staff_team_situations.sex,(o)=>o.name==='女').percentage}</div>
                <div>男员工 : <span style={{color:'red',fontWeight:'bold'}} >{this.state.staff_team_situations.sex.length>0&&find(this.state.staff_team_situations.sex,(o)=>o.name==='男').count}</span> 人,
                  占比 : {this.state.staff_team_situations.sex.length>0&&find(this.state.staff_team_situations.sex,(o)=>o.name==='男').percentage}</div>
              </div>
              <div style={{display:'flex', flexDirection:'column',justifyContent:"center",marginRight:'20px'}}>
                <div>农业户口 : <span style={{color:'red',fontWeight:'bold'}} >{this.state.staff_team_situations.hometown_type.length>0&&find(this.state.staff_team_situations.hometown_type,(o)=>o.name==='农业户口').count}</span> 人,
                  占比 : {this.state.staff_team_situations.hometown_type.length>0&&find(this.state.staff_team_situations.hometown_type,(o)=>o.name==='农业户口').percentage}</div>
                <div>非农业户口 : <span style={{color:'red',fontWeight:'bold'}} >{this.state.staff_team_situations.hometown_type.length>0&&find(this.state.staff_team_situations.hometown_type,(o)=>o.name==='非农业户口').count}</span> 人,
                  占比 : {this.state.staff_team_situations.hometown_type.length>0&&find(this.state.staff_team_situations.hometown_type,(o)=>o.name==='非农业户口').percentage}</div>
              </div>
              <div style={{display:'flex', flexDirection:'column',justifyContent:"center",marginRight:'20px'}}>
                <div>中共党员 : <span style={{color:'red',fontWeight:'bold'}} >{this.state.staff_team_situations.political_status.length>0&&find(this.state.staff_team_situations.political_status,(o)=>o.name==='中共党员').count}</span> 人,
                  占比 : {this.state.staff_team_situations.political_status.length>0&&find(this.state.staff_team_situations.political_status,(o)=>o.name==='中共党员').percentage}</div>
                <div>群众 : <span style={{color:'red',fontWeight:'bold'}} >{this.state.staff_team_situations.political_status.length>0&&find(this.state.staff_team_situations.political_status,(o)=>o.name==='群众').count}</span> 人,
                  占比 : {this.state.staff_team_situations.political_status.length>0&&find(this.state.staff_team_situations.political_status,(o)=>o.name==='群众').percentage}</div>
              </div>
              <div style={{display:'flex', flexDirection:'column',justifyContent:"center",marginRight:'20px'}}>
                <div>正式员工 : <span style={{color:'red',fontWeight:'bold'}} >{this.state.staff_team_situations.staff_type.length>0&&find(this.state.staff_team_situations.staff_type,(o)=>o.name==='正式员工').count}</span> 人,
                  占比 : {this.state.staff_team_situations.staff_type.length>0&&find(this.state.staff_team_situations.staff_type,(o)=>o.name==='正式员工').percentage}</div>
                <div>劳务派遣员工 : <span style={{color:'red',fontWeight:'bold'}} >{this.state.staff_team_situations.staff_type.length>0&&find(this.state.staff_team_situations.staff_type,(o)=>o.name==='劳务派遣员工').count}</span> 人,
                  占比 : {this.state.staff_team_situations.staff_type.length>0&&find(this.state.staff_team_situations.staff_type,(o)=>o.name==='劳务派遣员工').percentage}</div>
                <div>季节性临时工 : <span style={{color:'red',fontWeight:'bold'}} >{this.state.staff_team_situations.staff_type.length>0&&find(this.state.staff_team_situations.staff_type,(o)=>o.name==='季节性临时工').count}</span> 人,
                  占比 : {this.state.staff_team_situations.staff_type.length>0&&find(this.state.staff_team_situations.staff_type,(o)=>o.name==='季节性临时工').percentage}</div>
              </div>
              <div style={{display:'flex', flexDirection:'column',justifyContent:"center",marginRight:'20px'}}>
                <div>30岁以下 : <span style={{color:'red',fontWeight:'bold'}} >{this.state.staff_team_situations.age.length>0&&find(this.state.staff_team_situations.age,(o)=>o.name==='30岁以下').count}</span> 人,
                  占比 : {this.state.staff_team_situations.age.length>0&&find(this.state.staff_team_situations.age,(o)=>o.name==='30岁以下').percentage}</div>
                <div>30-45岁 : <span style={{color:'red',fontWeight:'bold'}} >{this.state.staff_team_situations.age.length>0&&find(this.state.staff_team_situations.age,(o)=>o.name==='30-45岁').count}</span> 人,
                  占比 : {this.state.staff_team_situations.age.length>0&&find(this.state.staff_team_situations.age,(o)=>o.name==='30-45岁').percentage}</div>
                <div>45岁以上 : <span style={{color:'red',fontWeight:'bold'}} >{this.state.staff_team_situations.age.length>0&&find(this.state.staff_team_situations.age,(o)=>o.name==='45岁以上').count}</span> 人,
                  占比 : {this.state.staff_team_situations.age.length>0&&find(this.state.staff_team_situations.age,(o)=>o.name==='45岁以上').percentage}</div>
              </div>
              <div style={{display:'flex', flexDirection:'column',justifyContent:"center",marginRight:'20px'}}>
                <div>中专/高中及以下 : <span style={{color:'red',fontWeight:'bold'}} >{this.state.staff_team_situations.education.length>0&&find(this.state.staff_team_situations.education,(o)=>o.name==='中专/高中及以下').count}</span> 人,
                  占比 : {this.state.staff_team_situations.education.length>0&&find(this.state.staff_team_situations.education,(o)=>o.name==='中专/高中及以下').percentage}</div>
                <div>大专 : <span style={{color:'red',fontWeight:'bold'}} >{this.state.staff_team_situations.education.length>0&&find(this.state.staff_team_situations.education,(o)=>o.name==='大专').count}</span> 人,
                  占比 : {this.state.staff_team_situations.education.length>0&&find(this.state.staff_team_situations.education,(o)=>o.name==='大专').percentage}</div>
                <div>本科及以上 : <span style={{color:'red',fontWeight:'bold'}} >{this.state.staff_team_situations.education.length>0&&find(this.state.staff_team_situations.education,(o)=>o.name==='本科及以上').count}</span> 人,
                  占比 : {this.state.staff_team_situations.education.length>0&&find(this.state.staff_team_situations.education,(o)=>o.name==='本科及以上').percentage}</div>
              </div>
              <div style={{display:'flex', flexDirection:'column',justifyContent:"center",marginRight:'20px'}}>
                <div>汉族 : <span style={{color:'red',fontWeight:'bold'}} >{this.state.staff_team_situations.ethnicity.length>0&&find(this.state.staff_team_situations.ethnicity,(o)=>o.name==='汉族').count}</span> 人,
                  占比 : {this.state.staff_team_situations.ethnicity.length>0&&find(this.state.staff_team_situations.ethnicity,(o)=>o.name==='汉族').percentage}</div>
                <div>维吾尔族 : <span style={{color:'red',fontWeight:'bold'}} >{this.state.staff_team_situations.ethnicity.length>0&&find(this.state.staff_team_situations.ethnicity,(o)=>o.name==='维吾尔族').count}</span> 人,
                  占比 : {this.state.staff_team_situations.ethnicity.length>0&&find(this.state.staff_team_situations.ethnicity,(o)=>o.name==='维吾尔族').percentage}</div>
                <div>回族 : <span style={{color:'red',fontWeight:'bold'}} >{this.state.staff_team_situations.ethnicity.length>0&&find(this.state.staff_team_situations.ethnicity,(o)=>o.name==='回族').count}</span> 人,
                  占比 : {this.state.staff_team_situations.ethnicity.length>0&&find(this.state.staff_team_situations.ethnicity,(o)=>o.name==='回族').percentage}</div>
                <div>其他 : <span style={{color:'red',fontWeight:'bold'}} >{this.state.staff_team_situations.ethnicity.length>0&&find(this.state.staff_team_situations.ethnicity,(o)=>o.name==='其他').count}</span> 人,
                  占比 : {this.state.staff_team_situations.ethnicity.length>0&&find(this.state.staff_team_situations.ethnicity,(o)=>o.name==='其他').percentage}</div>
              </div>

            </div>

            <div className={'table-data-content'}>
              <ReactDataGrid
                columns={columns}
                rowGetter={i => {
                  return { ...data[i], _index: i };
                }}
                rowsCount={data.length}
                minHeight={tableY}
                rowSelection={{
                  showCheckbox: false,
                  enableShiftSelect: true,
                  selectBy: {
                    indexes: selectedRowKeys,
                  },
                }}
                onRowClick={
                  (row) => {
                    this.props.dispatch({
                      type: 'inner_address_book/changeSelectRow',
                      payload: [row],
                    });
                  }
                }

              />
              {
                loading && <Loading/>
              }
            </div>
          </div>
        </SplitPane>




      </div>
      <div className="table-pagination">
        <MyPagination searchCondition={{ ...searchParams }} meta={meta} handleSearch={this.handleSearch}/>
      </div>
      <Modal
        title={<BuildModalTitle visible={this.state.addModal} modalClass="addModal" title="员工入职"/>}
        className="addModal"
        visible={this.state.addModal}
        centered
        onCancel={() => {
          this.setState({ addModal: false });
        }}
        onOk={this.handleAdd}
        width={1100}
      >
        <AddOrEditUser
          wrappedComponentRef={(inst) => this.AddForm = inst}/>

      </Modal>
      <Modal
        title={<BuildModalTitle visible={this.state.editModal} modalClass="editModal"
                                title={`修改 ${this.state.editRecord.name}`}/>}
        destroyOnClose
        visible={this.state.editModal}
        centered
        onOk={this.handleEdit}
        className="editModal"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        width={1200}
        onCancel={() => {
          this.setState({ editModal: false, editRecord: {} });
        }}

      >
        <AddOrEditUser
          editRecord={this.state.editRecord}
          wrappedComponentRef={(inst) => this.EditForm = inst}
        />

      </Modal>
      <Modal
        title={<BuildModalTitle visible={this.state.resignModal} modalClass="resignModal"
                                title={`离职 ${this.state.editRecord.name}`}/>}
        destroyOnClose
        visible={this.state.resignModal}
        centered
        onOk={this.handleEdit}
        className="resignModal"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        onCancel={() => {
          this.setState({ resignModal: false, editRecord: {} });
        }}

      >
        <ResignUser
          editRecord={this.state.editRecord}
          wrappedComponentRef={(inst) => this.ResignForm = inst}
        />

      </Modal>
      <Modal
        title={<BuildModalTitle visible={this.state.detailModal} modalClass="detailModal"
                                title={`${this.state.editRecord.name} 详情`}/>}
        destroyOnClose
        visible={this.state.detailModal}
        centered
        className="detailModal"
        footer={null}
        width={1200}
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        onCancel={() => {
          this.setState({ detailModal: false, editRecord: {} });
        }}

      >
        <Detail
          editRecord={this.state.editRecord}
          wrappedComponentRef={(inst) => this.DetailForm = inst}
        />

      </Modal>
      <Modal
        title={<BuildModalTitle visible={this.state.adjustmentModal} modalClass="adjustmentModal"
                                title={`"${this.state.editRecord.name}" 职位调整`} />}
        destroyOnClose
        visible={this.state.adjustmentModal}
        centered
        onOk={this.handleAdjust}
        className="adjustmentModal"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        onCancel={() => {
          this.setState({ adjustmentModal: false, editRecord: {} });
        }}

      >
        <Adjustment
          editRecord={this.state.editRecord}
          wrappedComponentRef={(inst) => this.AdjustmentForm = inst}
        />

      </Modal>
      <Modal
        title={<BuildModalTitle visible={this.state.changeStatusModal} modalClass="changeStatusModal"
                                title={`"${this.state.editRecord.name}" ${this.state.editRecord.status===1?'转正':'离职'}`} />}
        destroyOnClose
        visible={this.state.changeStatusModal}
        centered
        onOk={this.handleChangeStatus}
        className="changeStatusModal"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        onCancel={() => {
          this.setState({ changeStatusModal: false, editRecord: {} });
        }}
      >
        <ChangeStatus
          editRecord={this.state.editRecord}
          wrappedComponentRef={(inst) => this.ChangeStatusForm = inst}
        />

      </Modal>
      <Modal
        title={<BuildModalTitle visible={this.state.departmentsModal} modalClass="departmentsModal"
                                title={`部门管理`} />}
        destroyOnClose
        visible={this.state.departmentsModal}
        centered
        width={900}
        onOk={this.handleChangeStatus}
        className="departmentsModal"
        afterClose={() => {
          afterCloseModal(); // destroyOnClose需要
        }}
        onCancel={() => {
          this.setState({ departmentsModal: false});
        }}
      >
        <Departments refleshDepartments={this.refleshDepartments}
        />

      </Modal>
    </div>;
  }
}

export default BasicList;
